<!DOCTYPE html>
<html>
<!---
  Copyright 2009 Roman Nurik

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>PubSchools: a GeoModel demo app</title>
    <link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.7.0/build/reset/reset-min.css"/>
    <link type="text/css" rel="stylesheet" href="/static/jqueryui-theme/jquery-ui-1.7.2.custom.css"/>
    <link type="text/css" rel="stylesheet" href="/static/css/app.css"/>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://www.google.com/jsapi?key={% jsapi_key %}"></script>
    <script type="text/javascript" src="/static/lib/jquery.scrollTo-1.4.2-min.js"></script>
    <script type="text/javascript" src="/static/lib/microtemplate.js"></script>
    <script type="text/javascript" src="/static/js/front.js"></script>
    <script type="text/javascript">
      google.load('maps', '2');
      google.setOnLoadCallback(init);
    </script>
  </head>
  <body onunload="GUnload()">
    <div id="login-bar">
      {% if current_user %}
        <strong>{{ current_user.email }}</strong>
        &nbsp;|&nbsp;
        <a href="{% logout_url %}">Sign out</a>
      {% else %}
        <a href="{% login_url %}">Sign in</a>
      {% endif %}
    </div>
    
    <div id="container">
      <div id="header" class="clearfix">
        <div id="logo">
          <div id="slogan">
            A public school finder service and<br/>
            <a href="http://code.google.com/p/geomodel/">GeoModel</a>
            demo application
          </div>
        </div>
        
        <form action="" onsubmit="doGeocodeAndSearch(); return false;">
          <div id="search-container">
            <p><label for="search-query">Search for schools near:</label></p>
            <input id="search-query" type="search" />

            <input type="submit" value="Search"/>
            
            <img id="loading" src="/static/images/loading.gif" alt="Loading..."/>
          </div>
          
          <div id="advanced-options-container">
            <div id="search-error">&nbsp;</div>
            <a id="advanced-options-toggle" href="#">Advanced Options</a>
            
            <div id="advanced-options">
              <div class="row clearfix">
                <label for="search-grade-slider">Grade level:</label>
                <div id="search-grade-slider"></div>
                <div id="search-grade-display"></div>
              </div>
              <div class="row clearfix">
                <label for="search-school-type">School type:</label>
                <select id="search-school-type">
                  <option value="">(Any)</option>
                </select>
              </div>
            </div>
          </div>
        </form>
      </div>
      
      <div id="view-toggle">
        <a href="#">List view &raquo;</a>
      </div>
      
      <div id="content" class="clearfix">
        <div id="list-view-container">
          <p id="list-view-status">
            Enter a search location to
            search for nearby public schools.
          </p>
          <ul id="list-view">
          </ul>
        </div>
        
        <div id="map-container">
          <div id="map"></div>
        </div>
      </div>
      
      <div id="footer">
        <p>
          DISCLAIMER: this is a demo application for the
          <a href="http://code.google.com/p/geomodel/">GeoModel</a>
          open source project. There is no guarantee about the correctness
          of the data presented in this demo.
        </p>
        <p>
          Public school data provided by the
          <a href="http://www.ed.gov/">U.S. Department of Education</a>'s
          <a href="http://nces.ed.gov/">National Center for Education Statistics</a>.
        </p>
        <p>Copyright &copy; 2009, Roman Nurik</p>
      </div>
    </div>
    
    <script type="text/html" id="tpl_result_info_window">
      <div class="result-info-window">
        <h2><img src="<%= result.icon %>"/> <%= result.name %></h2>
      
        <div class="details">
          <% if (result.distance) { %>
            <p class="distance"><%= formatDistance(result.distance) %></p>
          <% } %>
          
          <address>
          <%= result.address %><br/>
          <%= result.city %>, <%= result.state %> <%= result.zip_code %><br/>
          <%= result.phone_number || '(Phone Number N/A)' %>
          </address>
        
          <ul>
            <li>
              <span class="label">Grades Taught:</span>
                <%= formatGradeLevel(result.lowest_grade_taught) || 'N/A' %>
                <% if (result.highest_grade_taught !== result.lowest_grade_taught) { %>
                  to
                  <%= formatGradeLevel(result.highest_grade_taught) || 'N/A' %>
                <% } %>
            </li>
            <li>
              <span class="label">School Type:</span>
              <%= result.school_type ?
                  ('<a target="_blank" href="http://nces.ed.gov/ccd/psadd.asp#type">' +
                   SCHOOL_TYPES[result.school_type] + '</a>') : 'N/A' %>
            </li>
            <li>
              <span class="label">Enrollment:</span>
              <%= result.enrollment || 'N/A' %>
            </li>
          </ul>
        </div>
      </div>
    </script>
    
    <script type="text/html" id="tpl_result_list_item">
      <h2><img src="<%= result.icon %>"/> <%= result.name %></h2>
      
      <div class="details">
        <% if (result.distance) { %>
          <p class="distance"><%= formatDistance(result.distance) %></p>
        <% } %>

        <address>
        <%= result.address %><br/>
        <%= result.city %>, <%= result.state %> <%= result.zip_code %><br/>
        <%= result.phone_number || '(Phone Number N/A)' %>
        </address>
        
        <ul>
          <li>
            <span class="label">Grades Taught:</span>
              <%= formatGradeLevel(result.lowest_grade_taught) || 'N/A' %>
              <% if (result.highest_grade_taught !== result.lowest_grade_taught) { %>
                to
                <%= formatGradeLevel(result.highest_grade_taught) || 'N/A' %>
              <% } %>
          </li>
          <li>
            <span class="label">School Type:</span>
            <%= result.school_type ?
                ('<a target="_blank" href="http://nces.ed.gov/ccd/psadd.asp#type">' +
                 SCHOOL_TYPES[result.school_type] + '</a>') : 'N/A' %>
          </li>
          <li>
            <span class="label">Enrollment:</span>
            <%= result.enrollment || 'N/A' %>
          </li>
        </ul>
      </div>
    </script>
  </body>
</html>
